<template>
    <view class="login-container">
        <view class="login-header">
            <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
            <text class="app-name">AI_学途引航者</text>
        </view>

        <view class="wx-login-section">
            <text class="login-title">微信快速登录</text>
            <text class="login-desc">授权即可快速登录，享受更多服务</text>

            <button class="wx-login-btn" @tap="getUserProfile">
                <text>微信一键登录</text>
            </button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        // 获取微信用户信息（新方法）
        getUserProfile() {
            // 使用新的getUserProfile API
            uni.getUserProfile({
                desc: '用于完善用户资料', // 声明获取用户个人信息后的用途
                success: (userProfileRes) => {
                    console.log('用户信息获取成功:', userProfileRes);
                    
                    // 获取到用户信息
                    const userInfo = userProfileRes.userInfo;
                    
                    // 获取登录凭证code
                    this.getLoginCode(userInfo);
                },
                fail: (err) => {
                    console.log('获取用户信息失败:', err);
                    uni.showToast({
                        title: '获取用户信息失败，请重试',
                        icon: 'none'
                    });
                }
            });
        },
        
        // 获取登录凭证
        getLoginCode(userInfo) {
            uni.login({
                provider: 'weixin',
                success: (loginRes) => {
                    if (loginRes.errMsg === 'login:ok') {
                        // 获取到code，发送到后端进行登录
                        this.wxLoginWithUserInfo(loginRes.code, userInfo);
                    } else {
                        uni.showToast({
                            title: '微信登录失败，请重试',
                            icon: 'none'
                        });
                    }
                },
                fail: () => {
                    uni.showToast({
                        title: '微信登录失败，请重试',
                        icon: 'none'
                    });
                }
            });
        },

        // 向后端发送微信登录请求
        wxLoginWithUserInfo(code, userInfo) {
            // 使用封装的http模块，只需要提供url、data和是否显示loading
            this.$http.post('user/user/login', {
                code: code,
                nickName: userInfo.nickName,
                avatarUrl: userInfo.avatarUrl,
                gender: userInfo.gender,
                country: userInfo.country,
                province: userInfo.province,
                city: userInfo.city
            }).then(res => {
                // 登录成功，保存token和用户信息
                if (res.data && res.data.token) {
                    // 保存信息（http模块会处理token）
                    uni.setStorageSync('token', res.data.token);
                    
                    // 保存用户信息
                    if (res.data.userInfo) {
                        uni.setStorageSync('userInfo', JSON.stringify(res.data.userInfo));
                    } else {
                        // 如果后端没有返回用户信息，使用微信提供的信息
                        uni.setStorageSync('userInfo', JSON.stringify({
                            nickName: userInfo.nickName,
                            avatarUrl: userInfo.avatarUrl,
                            gender: userInfo.gender,
                            country: userInfo.country,
                            province: userInfo.province,
                            city: userInfo.city
                        }));
                    }
                    
                    uni.showToast({
                        title: '登录成功',
                        icon: 'success'
                    });
                    
                    // 返回上一页或跳转到首页
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 1500);
                }
            }).catch(err => {
                console.error('登录失败:', err);
            });
        }
    }
}
</script>

<style>
.login-container {
    min-height: 100vh;
    padding: 60rpx 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f5f5f5;
}

/* 登录头部 */
.login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 100rpx;
}

.logo {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 20rpx;
}

.app-name {
    font-size: 40rpx;
    font-weight: bold;
    color: #2b9939;
}

/* 微信登录部分 */
.wx-login-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx;
}

.login-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #333;
}

.login-desc {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 60rpx;
}

.wx-login-btn {
    width: 80%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #09bb07;
    color: #fff;
    border-radius: 45rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    box-shadow: 0 4rpx 12rpx rgba(9, 187, 7, 0.2);
}
</style>